@font-face {
  font-family: Px437 Cordata PPC-400;
  src: url("/fonts/Px437_Cordata_PPC-400.ttf");
}

@font-face {
  font-family: Ac437 Phoenix BIOS;
  src: url("/fonts/Ac437_Phoenix_BIOS.ttf");
}

* {
  scrollbar-color: #9090e8 white;
  scrollbar-width: thin;
}

body {
  background-image: url("https://wolfrayetlaw.com/imgs/background/furbg1.png");
  background-size: cover;
  background-attachment: fixed;
  image-rendering: pixelated;
  font-family: "Px437 Cordata PPC-400";
}

.container {
  margin-top: 50px;
  display: grid;
  justify-content: center;
  grid-template-rows: 50px 300px 300px 300px 300px 300px 100px;
  grid-template-columns: 300px 300px 300px 300px;
  grid-auto-flow: row;
  grid-gap: 10px;
}

.header {
  color: white;
  background-color: transparent;
  grid-row: 1 / 1;
  grid-column: 1 / 4;  
}

.icon {
  background-color: white;
  grid-row: 2 / 2;
  grid-column: 1 / 1;
}

.icon img {
  width: auto;
  height: auto;
  display: block;
  margin: auto;
  margin-top: 60px;
  object-fit: contain;
}

.stats {
  background-image: linear-gradient(to top, #cacaff, #e8e8ff);
  height: 200px;
  line-height: 120%;
  padding: 6px;
  border: 6px double black;
  border-radius: 5px;
  grid-row: 3 / 3;
  grid-column: 2 / 1;
}

.main {
  background-image: linear-gradient(to top, #cacaff, #e8e8ff);
  padding: 10px;
  border: 6px double black;
  border-radius: 5px;
  overflow-y: scroll;
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

.bioimg {
  float: right;
  image-rendering: initial;
}

.tinybtn {
  background-color: #9090e8;
  width: 100px;
  padding: 5px;
  grid-row: 2 / 4;
  grid-column: 4 / 4;
}

.tinybtn img {
  padding: 3px;
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
}

.tinybtn img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}

.who {
  background-image: linear-gradient(to top, #cacaff, #e8e8ff);
  padding: 10px;
  border: 6px double black;
  border-radius: 5px;
  overflow-y: scroll;
  grid-row: 4 / 4;
  grid-column: 1 / 3;
}

.like {
  background-image: linear-gradient(to top, #cacaff, #e8e8ff);
  padding: 10px;
  border: 6px double black;
  border-radius: 5px;
  width: 409px;
  overflow-y: scroll;
  grid-row: 4 / 4;
  grid-column: 3 / 4;
}

.like h3 {
  margin: 3px;
  text-decoration: underline;
}

.like img {
  margin: 5px;
}

.chara1 {
  overflow-y: scroll;
  grid-row: 5 / 5;
  grid-column: 1 / 1;
  border: 8px double black;
}

.chara1 img,
.chara2 img {
  width: 150px;
  border: 1px solid black;
  image-rendering: initial;
  object-fit: scale-down;
  border: 3px solid black;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.3s ease-in-out;
}

.chara1 img:hover,
.chara2 img:hover {
  border: 3px solid black;
  image-rendering: initial;
  -webkit-transform: scale(1.1) rotate(6deg);
  object-fit: contain;
  position: relative;
}

.chara1 h2,
.chara2 h2 {
  text-decoration: underline;
  margin: 0px 0px 5px 0px;
}

.chara2 {
  overflow-y: scroll;
  grid-row: 5 / 5;
  grid-column: 2 / 2;
  border: 8px double black;
}

.misc {
  background-image: linear-gradient(to top, #cacaff, #e8e8ff);
  padding: 10px;
  border: 6px double black;
  border-radius: 5px;
  overflow-y: scroll;
  width: 409px;
  grid-row: 5 / 5;
  grid-column: 3 / 3;
}

.stamps {
    border: 8px double black;
  width: 549px;
  overflow-y: scroll;
  grid-row: 6 / 6;
  grid-column: 1 / 3;
}

.buttons {
    border: 8px double black;
  width: 210px;
  overflow-y: scroll;
  grid-row: 6 / 6;
  grid-column: 3 / 3;
  margin-left: -20px;
}

.blinkies {
    border: 8px double black;
  width: 170px;
  overflow-y: scroll;
  grid-row: 6 / 6;
  grid-column: 4 / 4;
  margin-left: -69px;
}

.blinkies img {
    padding: 1px;
}

.gohome {
  color: white;
  border: 3px solid white;
  background-color: transparent;
  padding: 10px;
  padding-top: 0px;
  border-radius: 5px;
  width: 150px;
  height: 40px;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -3px 3px 0 #000,
    1px 3px 0 #000;
  filter: drop-shadow(1px 1px 0 #000);
  grid-row: 7 / 7;
  grid-column: 1 / 1;
}

.gohome a {
  color: white;
}

.gohome a:hover {
  color: lightgray;
  text-decoration: none;
}

p {
  line-height: 18px;
}

mark {
  background-color: #ffffff;
}

div.scrollbox {
  background-color: #baecff;
  width: auto;
  height: 250px;
  padding: 10px;
  margin-bottom: 10px;
  border: 3px double black;
  overflow: auto;
}

details {
  border: 1px solid black;
  padding: 3px;
}

summary {
  text-decoration: underline;
}

.earthbound {
  color: #f0f0f0;
  background-color: #9090e8;
  padding: 12px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAZQTFRFkICokJDoo7t2VAAAAA9JREFUeJxj5GeEwA8QCAASKAQFZIZzZwAAAABJRU5ErkJggg==");
  background-position: 9px;
  background-clip: padding-box;
  border-image-slice: 9;
  border-image-width: 9px;
  border-image-repeat: stretch;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZAgMAAAC5h23wAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAKAgomKCA8PDwU/mmkQAAAAR0Uk5TAP///7MtQIgAAABYSURBVHicY2QIZWBgeH2AkXUpkH6Vwyg1AUj/D2eUegriizNmTwHSv90Ys/s3MDD6A+n6AwwMASA6m0F0ApCuE2eQekAFGmYezHyYfVD7Ye6BuQ/mXqj7ATNvNlqq4jt/AAAAAElFTkSuQmCC");
}

.popout {
 -webkit-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}